<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { useRouter } from 'vue-router';

// 创建响应式变量
const userName = ref("");
const password = ref("");

// 获取 Vuex store
const store = useStore();
const router = useRouter();

// 表单验证规则
const rules = {
  userName: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 3, max: 15, message: "用户名长度在 3 到 15 个字符之间", trigger: "blur" }
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符之间", trigger: "blur" }
  ]
};

// 登录处理函数
const handleLogin = async () => {
  try {
    const response = await store.dispatch("login", { userName: userName.value, password: password.value });
    // 登录成功后的处理逻辑
    console.log('登录成功:', response);
    // 存储 token 到 localStorage
    localStorage.setItem('authToken', response.data.token);
    // 登录成功后获取用户信息
    await store.dispatch("fetchUserInfo");
    ElMessage.success("登录成功！");
    // 跳转到首页
    await router.push("/home");
    // 清空表单
    userName.value = "";
    password.value = "";
  } catch (error) {
    console.error("Error during login:", error);
    ElMessage.error({ message: "用户名或密码错误", duration: 1000 });
  }
};
</script>

<template>
  <div class="container">
    <div class="login">
      <h1 style="text-align: center; color: #090909;">欢迎回来</h1>
      <el-form :model="{ userName, password }" :rules="rules" style="width: 300px" @submit.prevent="handleLogin">
        <!-- 用户名输入 -->
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userName" placeholder="请输入用户名" class="input-field"></el-input>
        </el-form-item>
        <!-- 密码输入 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="password" type="password" placeholder="请输入密码" class="input-field"
                    show-password></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100vh; /* 使容器高度为视口高度 */
  background: linear-gradient(135deg, #209cff 0%, #68e0cf 100%);
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 0;
  margin: 0;
  position: relative; /* 添加定位上下文 */
}

.login {
  position: relative; /* 确保阴影和悬停效果正确应用 */
  z-index: 1; /* 确保表单位于背景之上 */
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
}

.login:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.input-field {
  width: 100%;
  margin-bottom: 20px;
}

.login-btn {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  text-align: center;
  /* 如果 login-btn 也需要过渡效果，可以在这里添加 */
  transition: all 0.6s ease-in-out;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.register-link {
  font-size: 14px;
  margin-bottom: 20px;
}

.register-link a {
  color: #007bff;
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}
</style>



